<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form>
        <el-form-item>
          <el-button type="success" icon="plus"  @click="showCreate()" >添加设备
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit
              highlight-current-row>
      <el-table-column align="center" prop="date" label="日期" >
      </el-table-column>
      <el-table-column align="center" prop="name" label="姓名" >
      </el-table-column>
      <el-table-column align="center" prop="address" label="地址">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
        <el-button type="success" size="small">查看</el-button>
        <el-button type="success" size="small">编辑</el-button>
      </template>
      </el-table-column>
    </el-table>




    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form class="small-space"  label-position="left" label-width="100px"
               style='width: 600px; margin-left:50px;'>
        <el-form-item label="设备名称">
          <el-input type="text"  style="width: 250px;">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button  type="success" >创 建</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>






  </div>
</template>
<script>
  export default {
    data() {
      return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }],
        listLoading: false,//数据加载等待动画
        dialogFormVisible: false,//增加按钮弹窗能不能看到
        adminName: '管理员' ,
        title: 'hh'
      }
    },
    created() {//钩子函数创建时调用
    },
    methods: {
      showCreate() {
        this.dialogFormVisible = true;//显示弹窗
      },      
      getIndex($index) {
        //表格序号
        return $index + 1
      }
    }
  }
</script>
<style scoped>
  .requiredPerm {
    color: #ff0e13;
  }
</style>
